<template>
    <div class="DD">
        <div class="DDMain">
            <div class="LiveMain">
                <div class="videoMain" ref="videoPlayerWH" @mouseenter="mouseMove" @mouseleave="mouseStop" @mousemove="mouseIng">
                    <video src="" class="video" id="video0"></video>
                    <!-- <div class="dmmsk" :class="{VConOp: !dmCon}"> -->
                        <!-- <span v-for="(i,index) in dmArray" :key="inex">

                        </span> -->
                        <!-- <div class="dmb">
                            <span v-for="(i,index) in dmArray" :key="index">
                                <div class="dmBox">
                                <div class="dmBoxOne" v-if="i.name != null" :style="{border:'1px solid '+i.border_c}">
                                <div v-if="i.name != null" :style="{'background-image':'linear-gradient(45deg,'+i.mm+')'}" style="padding:0px 5px;color:#fff;">{{i.name}}</div>
                                <div v-if="i.lecel != null" style="color:#000;background-color:#fff;padding:0px 5px;">{{i.lecel}}</div>
                                </div><div class="fg" v-if="i.fg == 1">房</div><span class="msgb">{{i.msg}}</span></div>
                            </span>
                        </div>

                        <span>
                            <div class="dmBox"><div class="dmBoxOne" v-if="inRoom.name != null" :style="{border:'1px solid '+inRoom.border_c}">
                            <div v-if="inRoom.name != null" :style="{'background-image':'linear-gradient(45deg,'+inRoom.mm+')'}" style="padding:0px 5px;color:#fff;">{{inRoom.name}}</div>
                            <span v-if="inRoom.lecel != null" style="color:#000;background-color:#fff;padding:0px 5px;">{{inRoom.lecel}}</span>
                            </div>{{inRoom.msg}}</div>
                        </span>
                    </div> -->
                    <div class="VCon" :class="{VConOp: !conOp}" @mouseenter="mouseCMove" @mouseleave="mouseCStop">
                        <!-- <div class="sa"> -->
                            <div class="svg">
                                <svg v-show="player" @click="playerC" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-pause" viewBox="0 0 16 16">
                                    <path d="M6 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5zm4 0a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5z"/>
                                </svg>
                                <svg v-show="!player" @click="playerC" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg"><path d="M20.6249 9.6185C22.4583 10.677 22.4583 13.3232 20.6249 14.3816L9.74994 20.6603C7.91661 21.7188 5.62494 20.3957 5.62494 18.2788L5.62494 5.72139C5.62494 3.60444 7.91661 2.28134 9.74994 3.33982L20.6249 9.6185Z" fill="white"></path></svg>
                                <svg viewBox="0 0 24 24" @click="reatLoad" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.75 20.5C12.75 20.9142 12.4142 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12C2.75 9.64808 3.62821 7.50123 5.07312 5.86963H3.01001C2.5958 5.86963 2.26001 5.53384 2.26001 5.11963C2.26001 4.70542 2.5958 4.36963 3.01001 4.36963H7.01001C7.42422 4.36963 7.76001 4.70542 7.76001 5.11963V9.11963C7.76001 9.53384 7.42422 9.86963 7.01001 9.86963C6.5958 9.86963 6.26001 9.53384 6.26001 9.11963V6.7926C5.01041 8.16902 4.25 9.99568 4.25 12C4.25 16.2802 7.71979 19.75 12 19.75C12.4142 19.75 12.75 20.0858 12.75 20.5ZM17.75 17.1963V14.8799C17.75 14.4657 17.4142 14.1299 17 14.1299C16.5858 14.1299 16.25 14.4657 16.25 14.8799V18.8799C16.25 19.2941 16.5858 19.6299 17 19.6299H21C21.4142 19.6299 21.75 19.2941 21.75 18.8799C21.75 18.4657 21.4142 18.1299 21 18.1299H18.9273C20.372 16.4983 21.25 14.3517 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75C11.5858 2.75 11.25 3.08579 11.25 3.5C11.25 3.91421 11.5858 4.25 12 4.25C16.2802 4.25 19.75 7.71979 19.75 12C19.75 13.999 18.9937 15.8212 17.75 17.1963Z" fill="white"></path></svg>
                                <svg viewBox="0 0 24 24" v-show="!JSON.parse(JSON.stringify(videoArrayS))[0]" @click="videoMJ(0)" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.7815 4.28522C13.2722 3.89261 14 4.24201 14 4.87128V19.1286C14 19.7579 13.2722 20.1073 12.7815 19.7147L8.54026 16.3217C7.87534 15.7897 7.04918 15.4999 6.19766 15.4999H4.38145C4.03827 15.4999 3.79833 15.281 3.7531 15.0177C3.62929 14.2971 3.49999 13.2456 3.5 11.9999C3.50001 10.7543 3.6293 9.70279 3.7531 8.98216C3.79833 8.71888 4.03828 8.49994 4.38146 8.49994H6.19766C7.04917 8.49994 7.87534 8.21014 8.54026 7.6782L12.7815 4.28522ZM15.5 4.87128C15.5 2.98504 13.318 1.9351 11.8444 3.11392L7.60322 6.50689C7.20427 6.82606 6.70857 6.99994 6.19766 6.99994H4.38146C3.38521 6.99994 2.45632 7.67137 2.27476 8.72819C2.13963 9.51477 2.00001 10.6527 2 11.9999C1.99999 13.3472 2.13962 14.4851 2.27475 15.2717C2.45632 16.3285 3.3852 16.9999 4.38145 16.9999H6.19766C6.70857 16.9999 7.20427 17.1738 7.60322 17.493L11.8444 20.886C13.318 22.0648 15.5 21.0148 15.5 19.1286V4.87128ZM22.25 11.25H17.75C17.3358 11.25 17 11.5858 17 12C17 12.4142 17.3358 12.75 17.75 12.75H22.25C22.6642 12.75 23 12.4142 23 12C23 11.5858 22.6642 11.25 22.25 11.25ZM18.2803 14.7197L20.7803 17.2197C21.0732 17.5126 21.0732 17.9874 20.7803 18.2803C20.4874 18.5732 20.0126 18.5732 19.7197 18.2803L17.2197 15.7803C16.9268 15.4874 16.9268 15.0126 17.2197 14.7197C17.5126 14.4268 17.9874 14.4268 18.2803 14.7197ZM20.7803 6.78033C21.0732 6.48744 21.0732 6.01256 20.7803 5.71967C20.4874 5.42678 20.0126 5.42678 19.7197 5.71967L17.2197 8.21967C16.9268 8.51256 16.9268 8.98744 17.2197 9.28033C17.5126 9.57322 17.9874 9.57322 18.2803 9.28033L20.7803 6.78033Z" fill="white"></path></svg>
                                <svg viewBox="0 0 24 24" v-show="JSON.parse(JSON.stringify(videoArrayS))[0]" @click="videoMJ(0)" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.7815 4.28522C13.2722 3.89261 14 4.24201 14 4.87128V19.1286C14 19.7579 13.2722 20.1073 12.7815 19.7147L8.54026 16.3217C7.87534 15.7897 7.04918 15.4999 6.19766 15.4999H4.38145C4.03827 15.4999 3.79833 15.281 3.7531 15.0177C3.62929 14.2971 3.49999 13.2456 3.5 11.9999C3.50001 10.7543 3.6293 9.70279 3.7531 8.98216C3.79833 8.71888 4.03828 8.49994 4.38146 8.49994H6.19766C7.04917 8.49994 7.87534 8.21014 8.54026 7.6782L12.7815 4.28522ZM15.5 4.87128C15.5 2.98504 13.318 1.9351 11.8444 3.11392L7.60322 6.50689C7.20427 6.82606 6.70857 6.99994 6.19766 6.99994H4.38146C3.38521 6.99994 2.45632 7.67137 2.27476 8.72819C2.13963 9.51477 2.00001 10.6527 2 11.9999C1.99999 13.3472 2.13962 14.4851 2.27475 15.2717C2.45632 16.3285 3.3852 16.9999 4.38145 16.9999H6.19766C6.70857 16.9999 7.20427 17.1738 7.60322 17.493L11.8444 20.886C13.318 22.0648 15.5 21.0148 15.5 19.1286V4.87128ZM23.2803 10.0303C23.5732 9.73743 23.5732 9.26256 23.2803 8.96967C22.9874 8.67677 22.5126 8.67678 22.2197 8.96967L20.25 10.9394L18.2803 8.96975C17.9874 8.67686 17.5126 8.67686 17.2197 8.96976C16.9268 9.26266 16.9268 9.73753 17.2197 10.0304L19.1893 12L17.2197 13.9696C16.9268 14.2625 16.9268 14.7373 17.2197 15.0302C17.5125 15.3231 17.9874 15.3231 18.2803 15.0303L20.25 13.0607L22.2197 15.0303C22.5126 15.3232 22.9874 15.3232 23.2803 15.0303C23.5732 14.7374 23.5732 14.2626 23.2803 13.9697L21.3107 12L23.2803 10.0303Z" fill="white"></path></svg>
                                <span class="lastT">{{lastTimeN}}</span>
                            </div>
                            <div class="svg">
                                <svg v-show="dmCon" @click="dmkz" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.28142 5.18618L7.08662 3.39229C6.77792 2.9288 6.9034 2.30281 7.36689 1.99411C7.83039 1.6854 8.45638 1.81089 8.76508 2.27438L10.5319 4.92716C10.5768 4.9945 10.6125 5.06527 10.6393 5.13799C11.1174 5.13169 11.5675 5.12827 11.9896 5.12772L12 5.12765L12.0544 5.12766L12.1088 5.12765L12.1192 5.12772C12.4115 5.1281 12.7172 5.12986 13.0363 5.13299C13.067 5.05116 13.1088 4.97199 13.1623 4.89763L15.0689 2.24485C15.3939 1.79264 16.024 1.68953 16.4762 2.01454C16.9284 2.33955 17.0315 2.96961 16.7065 3.42182L15.4455 5.17635C16.2897 5.19733 17.2002 5.22507 18.1769 5.25958C19.9731 5.32304 21.3759 6.72997 21.6308 8.50919C21.7162 9.10539 21.7578 10.6458 21.7884 11.7781C21.7974 12.1111 21.8055 12.4088 21.8134 12.6368C21.8266 13.0162 21.5297 13.3345 21.1502 13.3477C20.7708 13.3609 20.4524 13.064 20.4392 12.6845C20.4313 12.4551 20.4233 12.1482 20.4143 11.8042C20.386 10.7137 20.348 9.25085 20.2696 8.70415C20.1092 7.5839 19.2593 6.67368 18.1283 6.63372C15.6823 6.5473 13.6573 6.50363 12.0544 6.50266C10.4515 6.50363 8.42652 6.5473 5.98047 6.63372C4.84949 6.67368 3.90958 7.51808 3.74912 8.63833C3.59742 9.69741 3.52084 11.014 3.52084 12.5849C3.52084 14.4699 3.63107 16.0862 3.84998 17.4315C4.02705 18.5198 4.94043 19.3363 6.04161 19.3908C7.91755 19.4836 9.30361 19.53 11.4724 19.53C11.8521 19.53 12.1599 19.8378 12.1599 20.2175C12.1599 20.5972 11.8521 20.905 11.4724 20.905C9.28169 20.905 7.87309 20.8581 5.97366 20.7641C4.22473 20.6776 2.77406 19.3807 2.49283 17.6524C2.26099 16.2276 2.14584 14.5392 2.14584 12.5849C2.14584 10.9534 2.22608 9.57387 2.38801 8.44338C2.64285 6.66416 4.13566 5.32304 5.93192 5.25958C6.76304 5.23021 7.5462 5.20575 8.28142 5.18618ZM12.5105 9.60362H11.1905V14.2346H13.4125V15.0816H10.7945V16.1596H13.4125L13.4152 16.8373C13.7755 16.8635 14.129 16.9998 14.425 17.2443H14.5345V16.1596H17.2295V15.0816H14.5345V14.2346H16.8005V9.60362H15.5245C15.7995 9.18562 16.0525 8.71262 16.2725 8.18462L15.1835 7.79962C14.9415 8.43762 14.6775 9.04262 14.3695 9.60362H12.8515L13.5445 9.29562C13.3135 8.78962 13.0385 8.32762 12.7305 7.88762L11.6855 8.23962C11.9825 8.63562 12.2575 9.08662 12.5105 9.60362ZM8.33053 13.1676L8.48453 11.6826H10.4645V8.29462H7.26353V9.27362H9.33153V10.7036H7.47253L7.16453 14.1576H9.44153C9.44153 15.3236 9.39753 16.0826 9.32053 16.4346C9.24353 16.7866 8.93553 16.9626 8.38553 16.9626C8.07753 16.9626 7.76953 16.9406 7.48353 16.9076L7.78053 17.9746L7.84208 17.979C8.12681 17.9995 8.39367 18.0186 8.66053 18.0186C9.66153 17.9526 10.2225 17.6006 10.3545 16.9626C10.4645 16.3246 10.5305 15.0596 10.5305 13.1676H8.33053ZM15.7885 13.2776V12.4196H14.5345V13.2776H15.7885ZM13.4125 12.4196V13.2776H12.2135V12.4196H13.4125ZM12.2135 11.4736H13.4125V10.5716H12.2135V11.4736ZM14.5345 11.4736V10.5716H15.7885V11.4736H14.5345Z" fill="white"></path><path d="M21.6199 14.869C21.8969 14.561 22.3712 14.5359 22.6791 14.813C22.9591 15.0648 23.0052 15.4796 22.8032 15.7843L22.7351 15.8721L16.9306 22.3705C16.6648 22.666 16.2207 22.699 15.9154 22.4632L15.8359 22.3922L12.8796 19.3578C12.5905 19.0611 12.5967 18.5863 12.8934 18.2972C13.1631 18.0345 13.5801 18.0157 13.8708 18.2374L13.954 18.3111L16.351 20.771L21.6199 14.869Z" fill="#FF6699"></path></svg>
                                <svg v-show="!dmCon" @click="dmkz"  viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg"><path  d="M7.08653 3.39235L8.28133 5.18624C7.5461 5.2058 6.76295 5.23027 5.93182 5.25963C4.13556 5.3231 2.64276 6.66421 2.38792 8.44343C2.22599 9.57393 2.14575 10.9534 2.14575 12.585C2.14575 14.5393 2.2609 16.2276 2.49273 17.6524C2.77397 19.3808 4.22464 20.6776 5.97357 20.7641C7.873 20.8581 10.3376 20.9051 12.5283 20.9051C12.908 20.9051 13.2158 20.5973 13.2158 20.2176C13.2158 19.8379 12.908 19.5301 12.5283 19.5301C10.3595 19.5301 7.91746 19.4836 6.04152 19.3908C4.94034 19.3363 4.02696 18.5198 3.84988 17.4316C3.63098 16.0863 3.52075 14.47 3.52075 12.585C3.52075 11.014 3.59733 9.69747 3.74903 8.63839C3.90948 7.51814 4.8494 6.67374 5.98038 6.63378C8.40317 6.54817 10.4129 6.50452 12.0085 6.50276C13.6041 6.50452 15.6138 6.54817 18.0366 6.63378C19.1676 6.67374 20.1075 7.51814 20.2679 8.63839C20.4196 9.69747 20.4732 11.0897 20.4732 12.6607C20.4732 13.0404 20.781 13.3482 21.1607 13.3482C21.5404 13.3482 21.8482 13.0404 21.8482 12.6607C21.8482 11.0291 21.791 9.57393 21.629 8.44343C21.3742 6.66421 19.8814 5.3231 18.0851 5.25963C17.1431 5.22635 16.2626 5.19936 15.4438 5.17867L16.7064 3.42188C17.0314 2.96967 16.9283 2.33961 16.4761 2.0146C16.0239 1.68959 15.3938 1.7927 15.0688 2.24491L13.1622 4.89769C13.1086 4.97233 13.0666 5.05182 13.0359 5.13398C12.7202 5.13065 12.4175 5.12864 12.1278 5.12796L12.1087 5.1277L12.0085 5.12776L11.9083 5.1277L11.8892 5.12796C11.4963 5.12888 11.0797 5.13224 10.6392 5.13805C10.6124 5.06532 10.5767 4.99456 10.5318 4.92722L8.76499 2.27444C8.45628 1.81094 7.8303 1.68546 7.3668 1.99416C6.90331 2.30287 6.77783 2.92886 7.08653 3.39235ZM11.2013 9.59793H12.5213C12.2683 9.08093 11.9933 8.62993 11.6963 8.23393L12.7413 7.88193C13.0493 8.32193 13.3243 8.78393 13.5553 9.28993L12.8623 9.59793H14.3803C14.6883 9.03693 14.9523 8.43193 15.1943 7.79393L16.2833 8.17893C16.0633 8.70693 15.8103 9.17993 15.5353 9.59793H16.8113V13.0393C15.1626 13.4113 13.8225 14.5979 13.2362 16.1539H10.8053V15.0759H13.4233V14.2289H11.2013V9.59793ZM8.49535 11.6769L8.34135 13.1619H10.5413C10.5413 15.0539 10.4753 16.3189 10.3653 16.9569C10.2333 17.5949 9.67235 17.9469 8.67135 18.0129C8.40449 18.0129 8.13763 17.9938 7.8529 17.9733L7.79135 17.9689L7.49435 16.9019C7.78035 16.9349 8.08835 16.9569 8.39635 16.9569C8.94635 16.9569 9.25435 16.7809 9.33135 16.4289C9.40835 16.0769 9.45235 15.3179 9.45235 14.1519H7.17535L7.48335 10.6979H9.34235V9.26793H7.27435V8.28893H10.4753V11.6769H8.49535ZM15.7993 12.4139V13.2719H14.5453V12.4139H15.7993ZM13.4233 13.2719V12.4139H12.2243V13.2719H13.4233ZM13.4233 11.4679H12.2243V10.5659H13.4233V11.4679ZM14.5453 10.5659V11.4679H15.7993V10.5659H14.5453ZM22.0624 18.0626C22.0624 20.2717 20.2716 22.0626 18.0624 22.0626C15.8533 22.0626 14.0624 20.2717 14.0624 18.0626C14.0624 15.8534 15.8533 14.0626 18.0624 14.0626C20.2716 14.0626 22.0624 15.8534 22.0624 18.0626ZM15.3256 18.0626C15.3256 19.5741 16.5509 20.7994 18.0624 20.7994C18.579 20.7994 19.0621 20.6563 19.4743 20.4076L15.7172 16.6511C15.4686 17.0632 15.3256 17.5462 15.3256 18.0626ZM20.4074 19.4746C20.6561 19.0623 20.7993 18.5792 20.7993 18.0626C20.7993 16.551 19.5739 15.3257 18.0624 15.3257C17.5456 15.3257 17.0623 15.469 16.6499 15.7179L20.4074 19.4746Z" fill="white"></path></svg>
                                <svg viewBox="0 0 24 24" @click="full()" style="margin-right:10px" xmlns="http://www.w3.org/2000/svg"><path  d="M6 4C4.89543 4 4 4.89543 4 6V12.5C4 13.0522 4.44772 13.5 5 13.5C5.55228 13.5 6 13.0522 6 12.5V6L12.5 6C13.0523 6 13.5 5.55229 13.5 5C13.5 4.44772 13.0523 4 12.5 4H6ZM20 11.5C20 10.9477 19.5523 10.5 19 10.5C18.4477 10.5 18 10.9477 18 11.5V18H11.5C10.9477 18 10.5 18.4477 10.5 19C10.5 19.5523 10.9477 20 11.5 20L18 20C19.1046 20 20 19.1045 20 18V11.5Z" fill="white"></path></svg>
                            </div>
                        <!-- </div> -->
                    </div>
                </div>
                <!-- <div class="DMMain">
                    <span class="tit">弹幕列表</span>
                </div> -->
            </div>
            <div class="LiveListOne">
                <div class="butBox">
                    <div class="butO c-pink" @click="addLive">添加直播间</div>
                    <div class="butO c-red" @click="openF">删除直播间</div>
                    <div class="butO c-blue" @click="fx">分享直播间</div>
                    <div class="butO c-blue" @click="jumpLLQ">跳转浏览器</div>
                    <div class="butO Green" @click="lz"><span>录制直播</span></div>
                </div>
                <div class="LiveList">
                    <div class="DDone" v-for="(i,index) in LivwRoom" :key="index" @click="listQH(i,i.room_id,index,i.ls)">
                        <img class="Imgs" :src='i.background' alt="" srcset="" draggable="false" :class="[{active : i.ls == 1},{active3 : i.room_id == mainW}]">
                        <div class="fl" v-show="i.ls == 0 || i.ls == 2"><span>未直播</span></div>
                        <div class="flsc" v-show="i.room_id == mainW"><span >正在观看</span></div>
                        <div class="fls" v-show="i.ls == 1 && i.room_id != mainW"><span >正在直播</span></div>
                        <!-- <div class="fls" v-show="i.ls == 2"><span>轮播中</span></div> -->
                        <span class="fname">{{i.name}}</span>
                    </div>
                    <div style="height:20px;width:100%"></div>
                </div>
            </div>
        </div>
        <div class="DDList">
            <!-- <span class="tit">DD列表</span> -->
            <div class="DDone" v-for="(i,index) in videoArrayS.slice(1,5)" :key="i" @mouseenter="mouseenter(i,index)" @mouseleave="mouseleave">
                <!-- <div class="DDone"> -->
                <!-- <img class="Img" src='../../public/csdt.jpg' alt="" srcset="" > -->
                <video src="" class="video" :id="'video'+(index+1)"></video>
                <span style="position: absolute;top:20px;left:20px">正在加载{{index}}</span>
                <div class="actBoxOne" :class="{actM: actIs == i}">
                    <div class="actBox">
                        <div class="actF actLeft" @click="videoB(i,index+1)">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="svg" viewBox="0 0 16 16">
                                <path d="M8 0a.5.5 0 0 1 .473.337L9.046 2H14a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-1.85l1.323 3.837a.5.5 0 1 1-.946.326L11.092 11H8.5v3a.5.5 0 0 1-1 0v-3H4.908l-1.435 4.163a.5.5 0 1 1-.946-.326L3.85 11H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h4.954L7.527.337A.5.5 0 0 1 8 0zM2 3v7h12V3H2z"/>
                            </svg>
                            <span>大屏</span>
                        </div>
                        <div style="width:1px;height:60px;background-color:#fff;"></div>
                        <div class="actF actRight" @click="videoMJ(index+1)">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="svg" viewBox="0 0 16 16">
                                <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
                            </svg>
                            <span v-show="i.val">静音</span>
                            <span v-show="!i.val">解除</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="butOs c-blue" @click="SX">添或改副屏主播</div> -->
        </div>
        <div class="addRoom" v-show="boxshow">
            <svg @click="addLive" xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="closeBox" viewBox="0 0 16 16">
                <path fill="white" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
            </svg>
            <div class="inBox">
                <input type="text" class="Input" v-model.trim="inputBox">
                <button class="butO c-blue" @click="addroom">添加</button>
            </div>
            <span class="roomidtip">{{addTip}}</span>

        </div>
    </div>
</template>
<script setup>
import { ref,onMounted,onUnmounted,reactive } from "vue";

import { toRaw } from "@vue/reactivity";
import Hls from 'hls.js';
import flvjs from 'flv.js'
import {makeBrotliDecode} from "../../public/decode.js";
import { removeListener } from "cluster";
const { spawn,exec,execFile } = require('child_process');
const fs = require('fs')
const {resolve, default: path} = require('path')
const iconv = require("iconv-lite");
const { ipcRenderer,shell } = require('electron')
const https = require('https');
const request = require('request')
import { storeToRefs } from 'pinia'
import useNoiseStatistics from '../stores/index';

//获取pinia
const counterStore = useNoiseStatistics()
const { SDPath,nowPath,cmdPid,startFlg,appBZ,sessdata,XC,outGS,roomLists,likeRoomList,likeRB } = storeToRefs(counterStore)

// const video = ref()

//选中状态
const actIs = ref()
//控制条透明控制
const conOp = ref(false)
//播放控制
const player = ref(true)
//弹幕开关控制
const dmCon = ref(true)
//透明度定时器
const timer = ref(null)
const vc = ref(false)   //视频控制条是否选中状态
//弹幕数组
const dmArray = ref([])
const danmakuRef = ref(null)
//进入直播间
const inRoom = ref('')
//播放列表
const videoOne = ref({val:true})
const videoArray = []
const videoArrayS = ref([])
//播放列表限制
const listMax = ref(5)
//位置顺序
let videoNum = []

//查询是否完成
const isYes = ref(false)
//视频框ref
const videoPlayerWH = ref(null)
//视频是否全屏
const fullC = ref(false)  //全屏标志
//弹幕web连接
var ws = null
//添加直播间input
const inputBox = ref('')
const boxshow = ref(false)
const addTip = ref('')
//当前软件路径
const pathOne = ref('E:\\csapp\\app')
//大屏房间号
const mainW = ref(null)
//切换提示
const QHTip= ref('')
//主播查询时间
const setTime = ref(100000)
const setTimes = ref(100000)
//已直播时间
const lastTimeN = ref('')

const LivwRoom = ref([])

const roomList = ref(counterStore.roomLists.split(','))

const likeroom = ref(counterStore.likeRoomList.split(','))

const likeBF = ref(counterStore.likeRB.split(','))

//删除列表
var delL = []

onMounted(()=>{
    // ipcRenderer.on('AppPath', (event, message) =>{
    //     counterStore.SDPath = message
    //     console.log('初始',counterStore.SDPath+'\\LiveImg\\Config.txt')
    //     fs.readFile(counterStore.SDPath+'\\LiveImg\\Config.txt','utf8',function(err,dataStr){
    //         let data = JSON.parse(dataStr)
    //         // console.log(data)
    //         counterStore.sessdata = data.ses
    //         counterStore.XC = data.xc
    //         counterStore.outGS = data.gs
    //         counterStore.roomLists = data.room.RL
    //         counterStore.likeRoomList = data.room.likeR
    //         counterStore.likeRB = data.room.likeR
    //         counterStore.appBZ = data.appbz
            // loadPathImg(counterStore.appBZ)
            if(roomList.value.length > 0 && roomList.value != ''){
                console.log(roomList.value.length,roomList.value)
                getZB(roomList.value)
                setTime.value = setInterval(() => {
                    getZB(roomList.value)
                }, 60000);
                getvideo()
                setTimes.value = setInterval(() => {
                    ZBT(0)
                }, 1000);
                setTimeout(() => {
                    dm(videoNum[0].data.room_id)
                }, 1000);
            }else{
                roomList.value = []
            }
        // })
    // })
    
    ipcRenderer.on('delList', (event, message) =>{
        delL = message
        let list = JSON.parse(JSON.stringify(roomList.value))
        message.forEach(element => {
            console.log(LivwRoom)
            for (let index = 0; index < JSON.parse(JSON.stringify(LivwRoom.value)).length; index++) {
                const ele = JSON.parse(JSON.stringify(LivwRoom.value))[index];
                if (element == ele.room_id) {
                    LivwRoom.value.splice(index,1)
                }
            }
            
            for (let index = 0; index < list.length; index++) {
                const eles = list[index];
                if (element == eles) {
                    list.splice(index,1)
                }
            }

            for (let index = 0; index < JSON.parse(JSON.stringify(videoArrayS.value)).length; index++) {
                const elese = JSON.parse(JSON.stringify(videoArrayS.value))[index];
                if (element == elese) {
                    videoArrayS.value.splice(index,1)
                }
            }
        });
        getvideo()
        counterStore.roomLists = list.join(',')
    })
    
})
onUnmounted(()=>{
    console.log(setTime.value)
    clearInterval(timer.value)
    clearInterval(setTime.value)
    clearInterval(setTimes.value)
    window.clearInterval(timer.value)
    window.clearInterval(setTime.value)
    window.clearInterval(setTimes.value)
})


function getter(dm_room_id) {
    request({
        url: `https://api.live.bilibili.com/room/v1/Danmaku/getDanmaku?room_id=${dm_room_id}`,
        // encoding: null,
        method: "GET",
        headers: {
            "content-type": "application/json"
            // 'referer':'https://www.bilibili.com/bangumi/play/ep777176',
            // "origin":"https://www.bilibili.com",
            // "Cookie":'SESSDATA=89bb3e3a%2C1712780170%2C154e7%2Aa2CjDoV-oUVBi9Jr2COXDJByghSt9YLXAOKc90wqKqg2LtAMS70txTwkr6PUFzneEOzJkSVkJiUXAwR3VxelIxNDVKc2RMWVd1WUtSN0hseFJjSE1tVVNiQXRmYkdidEJ6Q0VhZ3ZiUWlSdzdRQVREa0xTWDFlZHhBSTZka2VNYkVkNHJBeGVZNkFBIIEC'
        },
        }, function(error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log('data:::',body)
        }
        })
}


//开始直播弹窗
// function openTip(params) {
//     ipcRenderer.send('window-openT')
// }

function getNow() {
    var now = new Date(),
    // y = now.getFullYear(),
    month = now.getMonth(),
    d = now.getDate(),
    h = now.getHours(),
    m = now.getMinutes(),
    s = now.getSeconds();
   return ((month + 1) + "M" + d + "D" + h + "T" + m + "d" + s);
}
//停止录制

//录制直播视频
function lz() {
    // console.log('ffmpeg -i "'+videoNum[0].data.room_url.split('?')[0]+'" "'+counterStore.SDPath+'\\LiveImg\\'+videoNum[0].data.msg.name+getNow()+'.mp4"')
    let content = 'ffmpeg -i "'+videoNum[0].data.room_url.split('?')[0]+'" "'+counterStore.SDPath+'\\LiveImg\\'+videoNum[0].data.room_id+getNow()+'.mp4"'
    // if (zb.value == false) {
        fs.writeFile(counterStore.SDPath+'\\LiveImg\\downZB.bat',content,(err)=>{
        shell.openPath(counterStore.SDPath+'\\LiveImg')
        })
    // }
    
}
//跳转浏览器
function jumpLLQ() {
    exec('start https://live.bilibili.com/'+videoNum[0].data.room_id)
}
function playerC(){
    let video = document.getElementById('video0')
    if(player.value){
        video.pause()
        player.value = false
    }else{
        video.play()
        player.value = true
    }
}

//添加直播间
function addroom() {
    if(inputBox.value != ''){
        if (isNaN(inputBox.value)) {
            addTip.value = '请输入正确的房间号'
        }else{
            https.get('https://api.live.bilibili.com/xlive/web-room/v1/index/getRoomBaseInfo?room_ids='+inputBox.value+'&req_biz=video',(res)=>{
            let data = ''
            res.setEncoding('utf8');
            res.on('data',(chunk)=>{
                data +=chunk
            })
            res.on('end',()=>{
                let backMsg = JSON.parse(data).data.by_room_ids
                console.log(backMsg)
                if(backMsg.length != 0){
                    // console.log(backMsg)
                    roomList.value.push(Number(inputBox.value))
                    getZB([Number(inputBox.value)])
                    // let one = roomList.value.push(inputBox.value)
                    counterStore.roomLists = roomList.value.join(',')
                    let content = JSON.stringify({ses:counterStore.sessdata,appbz:counterStore.appBZ,xc:counterStore.XC,gs:counterStore.outGS,room:{likeR:counterStore.likeRB,RL:counterStore.roomLists,likerb:counterStore.likeRB}})
                        fs.writeFile(counterStore.SDPath+'\\LiveImg\\Config.txt',content,(err)=>{
                        if(err) {
                                console.error(err);
                                return
                            }
                        });
                    addTip.value = '添加直播间成功'
                    if (roomList.value.length <= 1) {
                        getvideo()
                    }
                    console.log(roomList.value)
                    setTimeout(() => {
                        boxshow.value = !boxshow.value
                    }, 500);
                }else{
                    addTip.value = '添加失败房间号错误'
                }
            })
        })
        }
    }else{
        addTip.value = '请输入房间号'
    }
    
}
//计算直播时间
function ZBT(index) {
    // console.log(index)
    let ZBtime = videoNum[index].data.msg.lST
    let nowTime = getNowDate()
    getDiffTime(ZBtime,nowTime)
    
}
//时长转换
function getDiffTime(startTime,endTime){
    var startTimeDate,endTimeDate;
    if(startTime){
        startTimeDate = new Date(startTime.replace(/-/g, '/')).getTime();
    }else{
        startTimeDate = new Date().getTime();
    }
    if(endTime){
        endTimeDate = new Date(endTime.replace(/-/g, '/')).getTime();
    }else{
        endTimeDate = new Date().getTime();
    }
    var diffTime = endTimeDate - startTimeDate;
    var day = diffTime > 0 ? Math.floor(diffTime/1000/60/60/24) : Math.ceil(diffTime/1000/60/60/24);
    var hDistance = diffTime - day * 86400*1000;
    var hour = hDistance > 0 ? Math.floor(hDistance/3600/1000) : Math.ceil(hDistance/3600/1000);
    var mDistance = hDistance - hour * 3600*1000;
    var minute = mDistance > 0 ? Math.floor(mDistance/60/1000) : Math.ceil(mDistance/60/1000);
    var sDistance = mDistance - minute *　60*1000;
    var second = sDistance > 0 ? Math.floor(sDistance/1000) : Math.ceil(sDistance/1000);
    // console.log(hour + '：' + minute+ '：' + second);
    lastTimeN.value = hour + ':' + minute+ ':' + second
}
//当前时间
const getNowDate = () => {
  var date = new Date();
  var sign2 = ":";
  var year = date.getFullYear() // 年
  var month = date.getMonth() + 1; // 月
  var day = date.getDate(); // 日
  var hour = date.getHours(); // 时
  var minutes = date.getMinutes(); // 分
  var seconds = date.getSeconds() //秒
  var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
  var week = weekArr[date.getDay()];
  // 给一位数的数据前面加 “0”
  if (month >= 1 && month <= 9) {
    month = "0" + month;
  }
  if (day >= 0 && day <= 9) {
    day = "0" + day;
  }
  if (hour >= 0 && hour <= 9) {
    hour = "0" + hour;
  }
  if (minutes >= 0 && minutes <= 9) {
    minutes = "0" + minutes;
  }
  if (seconds >= 0 && seconds <= 9) {
    seconds = "0" + seconds;
  }
  return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
}
//切换逻辑
function  QHNN(params,id,num,zt,timerO) {
    
    timerO = setTimeout(() => {
        // console.log('ws',{id:0,data:url,msg:params})
        mainW.value = id
        let url = JSON.parse(JSON.stringify(params))
        //关闭弹幕连接
        if(ws != null){
            ws.close()
        }
        dmArray.value = []
        inRoom.value = []
        dm(id)
        MV(url,0)
        videoNum.splice(0,1,{id:0,data:{room_id:id,room_url:JSON.parse(JSON.stringify(params)).room_url,msg:JSON.parse(JSON.stringify(params))}})
        console.log(videoNum)
    }, 1000);
}
function  QHNN2(params,id,num,zt,timerO2) {
    // if (timerO != null) {
        // clearTimeout(timerO)
        // window.clearTimeout(timerO)
    // }
    // timerO2 = setTimeout(() => {
        // console.log('ws',{id:0,data:url,msg:params})
        mainW.value = id
        let url = JSON.parse(JSON.stringify(params))
        //关闭弹幕连接
        if(ws != null){
            ws.close()
        }
        dmArray.value = []
        inRoom.value = []
        dm(id)
        MV(url,0)
        videoNum.push(videoNum[0])
        videoArrayS.value.push({id:num,data:{room_id:videoNum[0].data.room_id,room_url:videoNum[0].data.room_url,msg:videoNum[0].data.msg}})
        videoNum.splice(0,1,{id:0,data:{room_id:id,room_url:JSON.parse(JSON.stringify(params)).room_url,msg:JSON.parse(JSON.stringify(params))}})
        console.log(videoNum)
        // getvideo()
    // }, 1000);
}
function SX(params) {
    // let content = JSON.stringify({ses:counterStore.sessdata,appbz:counterStore.appBZ,xc:counterStore.XC,gs:counterStore.outGS,room:{likeR:counterStore.likeRB,RL:counterStore.roomLists,likerb:counterStore.likeRB}})
    // fs.writeFile(counterStore.SDPath+'\\LiveImg\\Config.txt',content,(err)=>{
    // if(err) {
    //         console.error(err);
    //         return
    //     }
        
    // });
    // location.reload()
    // fs.readFile(counterStore.SDPath+'\\LiveImg\\Config.txt','utf8',function(err,dataStr){
    //     let data = JSON.parse(dataStr)
    //     // console.log(data)
    //     counterStore.sessdata = data.ses
    //     counterStore.XC = data.xc
    //     counterStore.outGS = data.gs
    //     counterStore.roomLists = data.room.RL
    //     counterStore.likeRoomList = data.room.likeR
    //     counterStore.likeRB = data.room.likeR
    //     counterStore.appBZ = data.appbz
    //     loadPathImg(counterStore.appBZ)
    // })
}
//刷新大屏
function reatLoad(){
    let url = videoNum[0].data
    ws.close()
    MV(url,0)
    setTime.value = setInterval(() => {
        ZBT(0)
    }, 1000);
    dmArray.value = []
    inRoom.value = []
    setTimeout(() => {
        dm(url.room_id)
    }, 2000);
}
//大小窗口切换
function videoB(params,index) {

    // console.log(params)
    ZBT(index)
    let url = videoNum[index].data
    let url0 = videoNum[0].data
    //关闭弹幕连接
    if(ws != null){
        ws.close()
    }
    MV(url,0)
    MV(url0,index)
    setTime.value = setInterval(() => {
        ZBT(0)
    }, 1000);
    dmArray.value = []
    inRoom.value = []
    dm(videoNum[index].data.room_id)
    mainW.value = videoNum[index].data.room_id
    videoNum.splice(0,1,{id:0,data:url})
    videoNum.splice(index,1,{id:index,data:url0})
    // console.log(videoNum[0])
    // console.log(params)
}
//点击下方列表切换主播
function listQH(params,id,num,zt) {
    var timerO = null
    var timerO2 = null
    var nmm = false
    var nnmm = 4000
    if(zt == 1){
        if (JSON.parse(JSON.stringify(videoArrayS.value)).length >= 5) {
            // console.log('cf')
            for (let index = 0; index < JSON.parse(JSON.stringify(videoArrayS.value)).length; index++) {
                const element = JSON.parse(JSON.stringify(videoArrayS.value))[index];
                if(element.room_id == id){
                    // console.log('xiangdeng')
                    if (index <= 4 && index >= 1) {
                        // console.log('xiangdongqiexiaoyu4')
                        videoB(params,index)
                        mainW.value = id
                        nmm = 2
                    }else{
                        if (index== 0) {
                            QHTip.value = '当前正在观看'+videoNum[0].data.name
                            nmm = 5
                        }else{
                            nmm = 9
                            // console.log('cf>5 !=')
                            // // if (timerO != null) {
                            //     clearTimeout(timerO)
                            //     window.clearTimeout(timerO)
                            //     console.log(timerO)
                            // // }
                            // QHNN(params,id,num,zt,timerO)
                            
                        }
                    }
                    break
                }else{
                    nmm = 11
                }
            }
        }else{
            // console.log('cf2')
            for (let index = 0; index < JSON.parse(JSON.stringify(videoArrayS.value)).length; index++) {
                const element = JSON.parse(JSON.stringify(videoArrayS.value))[index];
                if(element.room_id == id){
                    if (index <= 4 && index >= 1) {
                        videoB(params,index)
                        mainW.value = id
                    }else{
                        if (index== 0) {
                            QHTip.value = '当前正在观看'+videoNum[0].data.name
                        }else{
                            // QHNN(params,id,num,zt)
                            // console.log(JSON.parse(JSON.stringify(videoArrayS.value)),videoNum)
                        }
                    }
                    nmm = false
                    break
                }else{
                    // // if (timerO != null) {
                    //     console.log(timerO2)
                    //     clearTimeout(timerO2)
                    //     window.clearTimeout(timerO2)
                    //     console.log(timerO2)
                    // // }
                    // QHNN2(params,id,num,zt,timerO2)
                    nmm = 10
                }
            }
        }

        setTimeout(() => {
            if (nmm == 10) {
                // console.log('-------------执行10')
                QHNN2(params,id,num,zt,timerO2)
            }
            if (nmm == 9) {
                // console.log('-------------执行9')
                QHNN(params,id,num,zt,timerO)
            }
            if (nmm == 11) {
                // console.log('-------------执行11')
                mainW.value = id
                let url = JSON.parse(JSON.stringify(params))
                //关闭弹幕连接
                if(ws != null){
                    ws.close()
                }
                dmArray.value = []
                inRoom.value = []
                dm(id)
                MV(url,0)
            }
        }, nnmm);
    }

    // console.log(params)
    // console.log(videoNum[0])
    // if (zt == 1) {
    //     console.log(params,id,videoNum,JSON.parse(JSON.stringify(videoArrayS.value)))
    //     let sf = false
    //     for (let index = 0; index < videoNum.length; index++) {
    //         console.log('jr')
    //         const element = videoNum[index];
    //         console.log(element.data.room_id,id)
    //         if (element.data.room_id == id) {
    //             // videoB(index)
    //             console.log('lsj',index,element)
    //             if (index <= 4 && index >= 1) {
    //                 // console.log('llsj')
    //                 videoB(params,index)
    //                 mainW.value = id
    //                 sf = false
    //             }else{
    //                 if (index== 0) {
    //                     QHTip.value = '当前正在观看'+videoNum[0].data.name
    //                     sf = false
    //                 }else{
    //                     // console.log('ws',{id:0,data:url,msg:params})
    //                     mainW.value = id
    //                     let url = JSON.parse(JSON.stringify(params))
    //                     //关闭弹幕连接
    //                     if(ws != null){
    //                         ws.close()
    //                     }
    //                     dmArray.value = []
    //                     inRoom.value = []
    //                     dm(id)
    //                     MV(url,0)
    //                     videoNum.splice(0,1,{id:0,data:{room_id:id,room_url:JSON.parse(JSON.stringify(params)).room_url,msg:JSON.parse(JSON.stringify(params))}})
    //                     console.log(videoNum)
    //                     sf = false
    //                 }
    //             }
    //             break
    //         }else{
    //             // let dataOne = JSON.parse(JSON.stringify(params))
    //             // console.log(dataOne)
    //             // videoArrayS.value.push({id:videoNum.length,room_id:dataOne.room_id,room_url:dataOne.room_url,data:{room_id:dataOne.room_id,room_url:dataOne.room_url,val:true,msg:dataOne}})
    //             console.log('进入是吧',videoArrayS.value)

    //             sf = true
    //             // if (JSON.parse(JSON.stringify(videoArrayS.value)).length < 5) {
    //             //     getInfo(id)
    //             //     setTimeout(() => {
    //             //         let num = JSON.parse(JSON.stringify(videoArrayS.value)).length
    //             //         // for (let index = 0; index < JSON.parse(JSON.stringify(videoArrayS.value)).length; index++) {
    //             //         //     const ele = JSON.parse(JSON.stringify(videoArrayS.value))[index];
    //             //         console.log(JSON.parse(JSON.stringify(videoArrayS.value)))
    //             //             MV(JSON.parse(JSON.stringify(videoArrayS.value))[num-1],num-1)
    //             //             videoNum.push({id:num-1,data:JSON.parse(JSON.stringify(videoArrayS.value))[num-1]})
    //             //             // console.log(videoNum)
    //             //             mainW.value = videoNum[0].data.room_id
    //             //         // }
    //             //         // console.log(videoNum)
    //             //     }, 1000);
    //             // }else{
    //             //     // console.log()
    //             //     for (let index = 0; index < JSON.parse(JSON.stringify(videoArrayS.value)).length; index++) {
    //             //         const element = JSON.parse(JSON.stringify(videoArrayS.value))[index];
    //             //         if (element.room_id == id) {
    //             //             if (index <= 4 && index >= 1) {
    //             //                 // console.log('llsj')
    //             //                 videoB(params,index)
    //             //                 mainW.value = id
    //             //             }else{
    //             //                 if (index== 0) {
    //             //                     QHTip.value = '当前正在观看'+videoNum[0].data.name
    //             //                 }else{
    //             //                     mainW.value = id
    //             //                     let url = JSON.parse(JSON.stringify(params))
    //             //                     //关闭弹幕连接
    //             //                     ws.close()
    //             //                     dmArray.value = []
    //             //                     inRoom.value = []
    //             //                     dm(id)
    //             //                     MV(url,0)
    //             //                     videoNum.splice(0,1,{id:0,data:url})

    //             //                 }
    //             //             }
    //             //             break
    //             //         }else{

    //             //         }
    //             //     }
    //             // }
    //             // break
    //             // console.log(index,element,videoNum)
                
    //         }
    //         // break
    //         if (sf = true && index == videoNum.length) {
                
    //             mainW.value = id
    //             let url = JSON.parse(JSON.stringify(params))
    //             // console.log('wsif',{id:0,data:url,msg:params})
    //             //关闭弹幕连接
    //             if(ws != null){
    //                 ws.close()
    //             }
    //             dmArray.value = []
    //             inRoom.value = []
    //             dm(id)
    //             MV(url,0)
    //             videoNum.splice(0,1,{id:0,data:{room_id:id,room_url:JSON.parse(JSON.stringify(params)).room_url,msg:JSON.parse(JSON.stringify(params))}})
    //             console.log(videoNum)
    //             sf = false
    //         }
    //     }
        
    //     // break
    // }
    // console.log(mainW.value,id)
}
//主播信息请求
async function getZB(room_id) {
    room_id.forEach(ele => {
        let room_url = 'https://api.live.bilibili.com/xlive/web-room/v1/index/getRoomBaseInfo?room_ids='+ele+'&req_biz=video'
        httpGet(room_url,ele)
    });
}
//get请求
function httpGet(room_url,ele) {
    https.get(room_url,(res)=>{
        let data = ''
        res.setEncoding('utf8');
        res.on('data',(chunk)=>{
            data +=chunk
        })
        res.on('end',()=>{
            let backMsg = JSON.parse(data).data.by_room_ids[ele]
            downImg(backMsg.cover,backMsg,ele)
            // console.log(JSON.parse(data).data.by_room_ids[ele])
        })
    })
}
//判断主播图片文件夹是否存在
async function pathY(params) {
    let ispath = fs.statSync(pathOne.value+'\\LiveImg')
    if (ispath) {
        console.log('存在')
    }else{
        fs.mkdirSync(pathOne.value+'\\LiveImg',function(error){

        })
    }
}
//下载主播图片并保存
function downImg(img_url,data,eles) {
    request({
    url: img_url,
    encoding: null,
    method: "GET",
    headers: {
        "content-type": "application/json"
    },
    }, function(error, response, body) {
        // console.log(response,eles)
        if (!error && response.statusCode == 200) {
            let base64Img = body.toString('base64');
            let imageOne = "data:image/jpg;base64," + base64Img
            if (data.live_status == 1) {
                let current_qn = 10000
                request({
                    url: "https://api.live.bilibili.com/xlive/web-room/v2/index/getRoomPlayInfo",
                    qs:{
                        'room_id': eles,
                        'protocol': '0,1',
                        'format': '0,1,2',
                        'codec': '0,1',
                        'qn': current_qn,
                        'platform': 'h5',
                        'ptype': 8,
                    },
                    method: "GET",
                    headers: {
                        "content-type": "application/json"
                    },
                    }, function(error, response, body) {
                        // console.log(response.statusCode,body)
                    if (!error && response.statusCode == 200) {
                        // console.log(JSON.parse(body).data.playurl_info.playurl)
                        JSON.parse(body).data.playurl_info.playurl.stream.forEach(ele => {
                            if(ele.protocol_name == "http_hls"){
                                let romm_u = ele.format[0].codec[0].url_info[0].host+ele.format[0].codec[0].base_url+ele.format[0].codec[0].url_info[0].extra
                                    // console.log(romm_u)
                                    if (JSON.parse(JSON.stringify(LivwRoom.value)).length < roomList.value.length) {

                                        LivwRoom.value.push({room_id:eles,room_url:romm_u,name:data.uname,uid:data.uid,title:data.title,ls:data.live_status,lST:data.live_time,background:imageOne,isN:true})
                                        
                                    }else{
                                        for (let index = 0; index < likeBF.value.length; index++) {
                                            const element = likeBF.value[index];
                                            if(element == eles){
                                                let data = likeBF.value.splice(index,1)
                                                counterStore.likeRoomList = data
                                                //弹出窗口
                                                ipcRenderer.send('window-openT',JSON.stringify(data))
                                                // if (element.isN == false ) {
                                                    // console.log('开始直播',element)
                                                // }
                                                // LivwRoom.value.splice(index,1,{room_id:eles,room_url:romm_u,name:data.uname,uid:data.uid,title:data.title,ls:data.live_status,lST:data.live_time,background:imageOne,isN:true})
                                            }
                                        }
                                        // console.log('eles',eles,'为0')
                                        
                                    }
                                    if (videoArrayS.value != undefined) {             
                                        JKROOM(data,romm_u,eles)
                                    }else{
                                        console.log('vs为undefined！',videoArrayS.value)
                                    }
                                }
                            });
                        }
                    })
            }else{
                if (JSON.parse(JSON.stringify(LivwRoom.value)).length < roomList.value.length) {
                    // for (let index = 0; index < JSON.parse(JSON.stringify(LivwRoom.value)).length; index++) {
                    //     const element = JSON.parse(JSON.stringify(LivwRoom.value))[index];
                    //     if(element.room_id == eles){
                    //         console.log('el',element.room_id,'eles',eles,'状态不为1')
                    //         LivwRoom.value.splice(index,1,{room_id:eles,room_url:null,name:data.uname,uid:data.uid,title:data.title,ls:data.live_status,lt:data.live_time,background:imageOne})
                    //     }else{
                    //         console.log('el',element.room_id,'eles',eles,'状态不为1，跳出')
                            LivwRoom.value.push({room_id:eles,room_url:null,name:data.uname,uid:data.uid,title:data.title,ls:data.live_status,lST:data.live_time,background:imageOne,isN:false})
                    //         break
                    //     }
                    // }
                }else{
                    // if(counterStore.likeRoomList.split(',').length > 0){
                    //     for (let index = 0; index < counterStore.likeRoomList.split(',').length; index++) {
                    //         const element = counterStore.likeRoomList.split(',')[index];
                    //         if(element.room_id == eles){
                    //             if (element.isN == true ) {
                                    // console.log('下播',eles)
                    //             }
                    //             // LivwRoom.value.splice(index,1,{room_id:eles,room_url:null,name:data.uname,uid:data.uid,title:data.title,ls:data.live_status,lST:data.live_time,background:imageOne,isN:false})
                    //         }
                    //     }
                    // }else{
                        let dataL = likeroom.value
                        // console.log(dataL)
                        for (let index = 0; index < likeBF.length; index++) {
                            const element = likeBF[index];
                            if(element == eles){
                                dataL.splice(index,1)
                            }
                            let time = null
                            if (time != null) {
                                clearInterval(time)
                                window.clearInterval(time)
                            }
                            time = setInterval(() => {
                                dataL.push(element)
                                likeroom.value = dataL
                                counterStore.likeRoomList = dataL
                            }, 1000);
                        }
                        
                        // console.log('添加成功2',dataL)
                        // console.log('添加成功3',counterStore.likeRoomList)
                    // }
                    
                    // console.log('eles',eles,'为0')
                    // LivwRoom.value.push({room_id:eles,room_url:null,name:data.uname,uid:data.uid,title:data.title,ls:data.live_status,lt:data.live_time,background:imageOne})
                }
                
            }
            // console.log(data)
        }else{
            console.log('直播间封面异常',data)
            
        }
    })
}
//监控更新删除停播直播间
function JKROOM(data,room_url,eles) {
    // console.log('cax')
    // console.log(eles)
    if (data.live_status == 1) {
        if(JSON.parse(JSON.stringify(videoArrayS.value)).length < 5){
           let dataOne = JSON.parse(JSON.stringify(videoArrayS.value))
           let zt = 0
            for (let index = 0; index < dataOne.length; index++) {
                const element = dataOne[index];
                if (element.room_id != eles) {
                    zt = index+1
                }else{
                    return
                }
                if (zt > dataOne.length) {
                    console.log('新增主播',index,element.room_id,eles,zt)
                    zt = 0
                    videoArrayS.value.push({room_id:eles,room_url:room_url,msg:{lST:data.live_time},val:true})
                    return {room_id:eles,room_url:room_url,msg:{lST:data.live_time},val:true}
                }
            }
        }
        // videoArrayS.push({room_id:room_id,room_url:romm_u,val:true})
    }else{
        let dataOne = JSON.parse(JSON.stringify(videoArrayS.value))
        for (let index = 0; index < dataOne.length; index++) {
            const element = dataOne[index];
            if (element.room_id == eles) {
                videoArrayS.value.splice(index,1)
                console.log('下播主播',eles,data.uname)
            }
        }
    }
}
function getNum() {
    for (let index = 0; index < JSON.parse(JSON.stringify(videoArrayS.value)).length; index++) {
        const element = JSON.parse(JSON.stringify(videoArrayS.value))[index];
        videoNum.push({id:index,data:element})
    }
    console.log(videoNum)
}
//分享直播间
function fx(params) {
    // console.log(videoNum[0].data.room_id)
    ipcRenderer.send('copy','https://live.bilibili.com/'+videoNum[0].data.room_id)
}
//新建窗口
function openF() {
    
    if (delL.length != 0) {
        let content = JSON.stringify({ses:counterStore.sessdata,appbz:counterStore.appBZ,xc:counterStore.XC,gs:counterStore.outGS,room:{likeR:counterStore.likeRB,RL:counterStore.roomLists,likerb:counterStore.likeRB}})
        fs.writeFile(counterStore.SDPath+'\\LiveImg\\Config.txt',content,(err)=>{
           if(err) {
                 console.error(err);
                 return
           }
        //    delL.length = []
           ipcRenderer.send('window-openF')
      });
    }else{
        ipcRenderer.send('window-openF')
    }
}
//弹幕切换
function dmkz(params) {
    dmCon.value = !dmCon.value
}

//控制静音
function videoMJ(index) {
    // console.log(index)
    let dom = document.getElementById("video"+index)
    let data = videoNum[index].data
    let dataOne = {room_id:data.room_id,msg:{lST:data.msg.lST},room_url:data.room_url,val:false}
    let dataOnes = {room_id:data.room_id,msg:{lST:data.msg.lST},room_url:data.room_url,val:true}
    if (dom.muted === true) {
        dom.muted = false
        videoNum.splice(index,1,{id:index,data:dataOne})
    //     // videoList.value.splice(index,1,{url:params.url,val:false})
    }else{
        dom.muted = true
    //     // videoList.value.splice(index,1,{url:params.url,val:true})
        videoNum.splice(index,1,{id:index,data:dataOnes})
    }
}
//控制全屏
function full() {
  fullC.value = !fullC.value
  if (fullC.value == false) {
    videoPlayerWH.value.requestFullscreen();
  } else if (videoPlayerWH.value.mozRequestFullScreen) {
    videoPlayerWH.value.mozRequestFullScreen();
  } else if (videoPlayerWH.value.webkitRequestFullscreen) {
    videoPlayerWH.value.webkitRequestFullscreen();
  } else if (videoPlayerWH.value.msRequestFullscreen) {
    videoPlayerWH.value.msRequestFullscreen();
  }
  if(document.exitFullScreen) {
    document.exitFullScreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if(element.msExitFullscreen) {
    element.msExitFullscreen();
  }
//   isQp.value = false
}

//添加直播间
function addLive() {
    boxshow.value = !boxshow.value
    

}
//裁取链接
function py() {
    const bat = spawn('python', ['./public/py/Live.py'], { encoding: 'utf8' });
    bat.stdout.on('data', (data) => {
    let nowU = JSON.stringify(data.toString('utf-8')).split('|')

        for (let index = 0; index < nowU.length; index++) {
            const element = nowU[index];
            if (index > 0) {
                if (index == element.length) {
                    
                    if (element != 'False' && element.split('"')[0] != 'False') {
                        videoArray.value.push({url:element.split('"')[0],val:true})
                    }
                }else{
                    
                    if (element != 'False' && element.split('\\')[0] != 'False') {
                        // if (element.split('"')[0] != 'False') {
                            videoArray.value.push({url:element.split('"')[0],val:true})
                        // }
                    }
                    
                }
            }
        }
        // console.log(videoList.value)
        videoM()
    });
}

//加载
function MV(data,index) {
    let dom = document.getElementById("video"+index)
        if (Hls.isSupported()) {
            const hls = new Hls();
            hls.loadSource(data.room_url);
            hls.attachMedia(dom);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                dom.play();
            });
        }
}
//加载主播直播间信息
// function loadLR() {
//     const bat = spawn('python', ['./public/py/massgn.py']);
//     bat.stdout.on('data', (data) => {
//         let res = iconv.decode(data, "gbk");
//         loadImg(JSON.parse(res))
//         console.log(res)
//     })
// }
// //判断处理完成的json长度
// function loadImg(item) {
//     console.log(item)
//     item.forEach(element => {
//         Img(element)
//     }); 
// }
// //node加载本地图片并写入json
// function Img(params) {
//     fs.readFile('./LiveImg/'+params['background'], function (err, data) {
//     if (err) {
//             console.log(err);
//         } else {
//         // base64图片编码字符串
//         // imgSrcList.push("data:image/jpg;base64," + data.toString('base64'));
            
//         }
//     })
// }
//鼠标移入移出
function mouseenter(par) {
    actIs.value = par
}
function mouseleave() {
    actIs.value = false
}
//大屏移入移出控制
function mouseIng() {
  mouseMove()
  noneController()
}
function mouseCMove() {
//   console.log("进入")
  vc.value = true
  mouseMove()
}
function mouseCStop() {
//   console.log("出去")
  vc.value = false
}
function mouseMove() {
  conOp.value = true
}
function mouseStop() {
  clearTimeout(timer.value)
  setTimeout(() => {
    conOp.value = false
  }, 1000);
}
function noneController() {
  clearTimeout(timer.value)
  timer.value = setTimeout(() => {
    if (!vc.value){
      setTimeout(() => {
        conOp.value = false
      },1000)
    }
  },1000)
}
//弹幕请求
function dm(room_id) {
    https.get('https://api.live.bilibili.com/room/v1/Danmu/getConf?room_id='+room_id+'',(res)=>{
        let data = ''
        res.setEncoding('utf8');
        res.on('data',(chunk)=>{
            data +=chunk
        })
        res.on('end',()=>{
            console.log('进入了',videoNum[0].data.room_id,room_id,JSON.parse(data))
            // dmToken.value = JSON.parse(data).data.token
            webSocket(room_id,JSON.parse(data).data.host_server_list,JSON.parse(data).data.token);
        })
    })
}
var eventTarget = new EventTarget();

//事件注册
function on(eventType, callback){
    eventTarget.addEventListener(eventType, function(e){
        callback(e.detail);
    });
}

//生成认证数据
function getCertification(json){
    let encoder = new TextEncoder();    //编码器
    let jsonView = encoder.encode(json);    //utf-8编码
    let buff = new ArrayBuffer(jsonView.byteLength + 16);    //数据包总长度：16位头部长度+bytes长度
    let view = new DataView(buff);    //新建操作视窗
    view.setUint32(0, jsonView.byteLength + 16);    //整个数据包长度
    view.setUint16(4, 16);    //头部长度
    view.setUint16(6, 1);    //协议版本
    view.setUint32(8, 7);    //类型,7为加入房间认证
    view.setUint32(12, 1);    //填1
    for(let r = 0; r < jsonView.byteLength; r++){
        view.setUint8(16 + r, jsonView[r]);    //填入数据
    }
    return buff;
}

//处理服务器发送过来的数据，初步打包
/*打包格式（JSON）
键        值类型
Len        int
HeadLen     int
Ver        int
Type       int
Num        int
body       JSON（Type != 3）或者int（Type == 3）
*/
function handleMessage(blob, call){
    let reader = new FileReader();
    reader.onload = function(e){
        let buff = e.target.result;    //ArrayBuffer对象
        let decoder = new TextDecoder();    //解码器
        let view = new DataView(buff);    //视图
        let offset = 0;
        let packet = {};
        let result = [];
        while (offset < buff.byteLength){    //数据提取
            let packetLen = view.getUint32(offset + 0);
            let headLen = view.getUint16(offset + 4);
            let packetVer = view.getUint16(offset + 6);
            let packetType = view.getUint32(offset + 8);
            let num = view.getUint32(12);
            if (packetVer == 3){    //解压数据
                let brArray = new Uint8Array(buff, offset + headLen, packetLen - headLen);
                let BrotliDecode = makeBrotliDecode();    //生成Brotli格式解压工具的实例
                let buffFromBr = BrotliDecode(brArray);    //返回Int8Array视图
                let view = new DataView(buffFromBr.buffer);
                let offset_Ver3 = 0;
                while (offset_Ver3 < buffFromBr.byteLength){    //解压后数据提取
                    let packetLen = view.getUint32(offset_Ver3 + 0);
                    let headLen = view.getUint16(offset_Ver3 + 4);
                    let packetVer = view.getUint16(offset_Ver3 + 6);
                    let packetType = view.getUint32(offset_Ver3 + 8);
                    let num = view.getUint32(12);
                    packet.Len = packetLen;
                    packet.HeadLen = headLen;
                    packet.Ver = packetVer;
                    packet.Type = packetType;
                    packet.Num = num;
                    let dataArray = new Uint8Array(buffFromBr.buffer, offset_Ver3 + headLen, packetLen - headLen);
                    packet.body = decoder.decode(dataArray);    //utf-8格式数据解码，获得字符串
                    result.push(JSON.stringify(packet));    //数据打包后传入数组
                    offset_Ver3 += packetLen;
                }
            }else{
                packet.Len = packetLen;
                packet.HeadLen = headLen;
                packet.Ver = packetVer;
                packet.Type = packetType;
                packet.Num = num;
                let dataArray = new Uint8Array(buff, offset + headLen, packetLen - headLen);
                if (packetType == 3){    //获取人气值
                    packet.body = (new DataView(buff, offset + headLen, packetLen - headLen)).getUint32(0);    //若入参为dataArray.buffer，会返回整段buff的视图，而不是截取后的视图
                }else{
                    packet.body = decoder.decode(dataArray);    //utf-8格式数据解码，获得字符串
                }
                result.push(JSON.stringify(packet));    //数据打包后传入数组
            }
            offset += packetLen;
        }
        call(result);    //数据后续处理
    }
    reader.readAsArrayBuffer(blob);    //读取服务器传来的数据转换为ArrayBuffer
}

function webSocket(room_id,url_ws,dm_token){
    console.log('wss://'+url_ws[0].host+':'+url_ws[0].wss_port+'/sub')
    if("WebSocket" in window){
        // console.log("您的浏览器支持WebSocket");
        var timer;
        ws = new WebSocket('ws://broadcastlv.chat.bilibili.com:2244/sub');

        ws.onopen = function(e){
            // console.log("open");
            var certification = {
                "uid": 0,
                "roomid": room_id,
                "protover": 2,
                "platform": "web",
                "type": 2,
                "token": ''    //值为空字符串好像也没问题
            }
            
            // if (ws.socket.readyState===1) {
                setTimeout(() => {
                    ws.send(getCertification(JSON.stringify(certification)));
                }, 1000);
            // }
            
            // console.log(JSON.stringify(certification))
            //发送心跳包
            timer = setInterval(function(){
                let buff = new ArrayBuffer(16);
                let i = new DataView(buff);
                i.setUint32(0, 0);    //整个封包
                i.setUint16(4, 16);    //头部
                i.setUint16(6, 1);    //协议版本
                i.setUint32(8, 2);    //操作码,2为心跳包
                i.setUint32(12, 1);    //填1
                ws.send(buff);
            }, 50000); //30秒

        }

        ws.onmessage = function(e){
            //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
            //console.log(e.data);
            // let nncc = iconv.encode(e,'gbk')
            let blob = e.data;
            console.log(iconv.encode(e,'gbk'))
            // if (Buffer.isBuffer(e)) {
                
            // }
            handleMessage(blob, function(result){
                //触发事件
                for(let i=0; i<result.length; i++){
                    let json = JSON.parse(result[i]);
                    
                    if (json.Type == 5){
                        console.log(json.body)
                        // let x = iconv.encode(json.body,'gbk')
                        // console.log(iconv.decode(json.body,'gbk'))
                        // iconv.decode(data, "gbk");
                        // let event = new CustomEvent(JSON.parse(json.body).cmd, {detail: JSON.parse(json.body)});
                        // eventTarget.dispatchEvent(event);
                    }
                    if (json.Type == 8){
                        let event = new CustomEvent("Certify_Success", {detail: JSON.parse(json.body)});
                        eventTarget.dispatchEvent(event);
                    }
                    // if (json.Type == 3){
                    //     let event = new CustomEvent("VIEW", {detail: json.body});
                    //     eventTarget.dispatchEvent(event);
                    // }
                }
            });
        }

        ws.onclose = function(e){
            //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
            console.log("close");
            if (timer != null){
                clearInterval(timer);    //停止发送心跳包
            }
            // setTimeout(webSocket(room_id),4000);    //4秒后重连
        }

        ws.onerror = function(e){
            //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
            console.log(e);
        }
    }else{
        console.log("您的浏览器不支持WebSocket");
    }
}
//认证成功事件
on("Certify_Success", function(e){
    let data = e;
    if (data.code == 0){
        console.log("Certify_Success");
    }
})

//人气值刷新事件
on("VIEW", function(e){
    let data = e;
    console.log("VIEW: " + data.toString());
})

//进入直播间或关注直播间事件
on("INTERACT_WORD", function(e){
    let data = e;
    let uname = data.data.uname;
    let timedata = new Date(data.data.timestamp * 1000);
    let time = timedata.toLocaleDateString() + " " + timedata.toTimeString().split(" ")[0];
    if (data.data.msg_type == 2){    //个人推测，不一定准确
        // console.log(time+ " " + uname + " 关注直播间");
        inRoom.value = uname + " 关注直播间"
    }else{
        // console.log(data.cmd + " " + time+ " " + uname + " 进入直播间");
        // inRoom.value = uname + " 进入直播间"
        // console.log(data.data.fans_medal)
        if(data.data.fans_medal.medal_name != '' && data.data.fans_medal.medal_name != undefined){
            let border_color = '#'+data.data.fans_medal.medal_color_border.toString(16)
            let color = '#'+data.data.fans_medal.medal_color.toString(16)
            let mcolors = '#'+data.data.fans_medal.medal_color_start.toString(16)
            let mcolore = '#'+data.data.fans_medal.medal_color_end.toString(16)
            let name = data.data.fans_medal.medal_name
            let level = data.data.fans_medal.medal_level
            inRoom.value = {border_c:border_color,color:color,name:name,lecel:level,msg:uname + '进入直播间',mm:mcolors+','+mcolore}
        }else{
            inRoom.value = {border_c:null,color:null,name:null,lecel:null,msg:uname + '进入直播间'}
        }

    }
})

//弹幕事件
/**
 * info[2][2]字段为房管字段
 */
on("DANMU_MSG", function(e){
    let data = e;
    let uname = data.info[2][1];
    let timedata = new Date(data.info[9].ts * 1000);
    let time = timedata.toLocaleDateString() + " " + timedata.toTimeString().split(" ")[0];
    let text = data.info[1];
    console.log(data)
    if(data.info[3][1] != '' && data.info[3][1]!= undefined && data.info[3][0]!= 0){
        let border_color = '#'+data.info[3][7].toString(16)
        let color = '#'+data.info[2][7].toString(16)
        let mcolors = '#'+data.info[3][8].toString(16)
        let mcolore = '#'+data.info[3][9].toString(16)
        let fg = data.info[2][2]
        let name = data.info[3][1]
        let level = data.info[3][0]
        deledm()
        dmArray.value.push({border_c:border_color,color:color,name:name,lecel:level,msg:text,fg:fg,mm:mcolors+','+mcolore})
    }else{
        deledm()
        dmArray.value.push({border_c:null,color:null,name:null,lecel:null,msg:text,fg:null,mm:null})
    }
})
//删除弹幕
function deledm() {
    // if (dmArray.value.length >= 8) {
    //     dmArray.value.splice(0,1)
    // }
}

//礼物赠送事件
// on("SEND_GIFT", function(e){
//     let data = e;
//     let uname = data.data.uname;
//     let gift_num = data.data.num;
//     let act = data.data.action;
//     let gift_name = data.data.giftName;
//     let timedata = new Date(data.data.timestamp * 1000);
//     let time = timedata.toLocaleDateString() + " " + timedata.toTimeString().split(" ")[0];
//     console.log(data.cmd + " " + time+ " " + uname + " :" + act + " " + gift_num + " " + gift_name);
// })


//------------------------------------------

function getvideo(){
    // roomList.value.forEach(element => {
    //     getInfo(element)
    // });
    var VN = 0
    for (let index = 0; index < roomList.value.length; index++) {
        const element = roomList.value[index];
        // if(index+1 == roomList.value.length+1){
            // console.log(element)
        // }else{
            getInfo(element)
        //     console.log(index)
        // }
        
    }
    setTimeout(() => {
            for (let index = 0; index < JSON.parse(JSON.stringify(videoArrayS.value)).length; index++) {
                const ele = JSON.parse(JSON.stringify(videoArrayS.value))[index];
                MV(ele,index)
                videoNum.push({id:index,data:ele})
                // console.log(videoNum)
                mainW.value = videoNum[0].data.room_id
            }
            // console.log(videoNum)
        }, 1000);
}

function getInfo(room_id) {
    https.get('https://api.live.bilibili.com/xlive/web-room/v1/index/getRoomBaseInfo?room_ids='+room_id+'&req_biz=video',(res)=>{
        let data = ''
        res.setEncoding('utf8');
        res.on('data',(chunk)=>{
            data +=chunk
        })
        res.on('end',()=>{
            // dmToken.value = JSON.parse(data).data.token
            let room_info = JSON.parse(data).data.by_room_ids[room_id]
            // console.log(room_info)
            let room = {lS:room_info.live_status,lST:room_info.live_time,title:room_info.title,name:room_info.uname}
            // console.log(room)
            if (room.lS == 1) {
                getHLS(room_id,true,room)
                
            }
        })
    })
}
//请求hls视频流
function getHLS(room_id,nn,room_i) {
let current_qn = 10000
request({
    url: "https://api.live.bilibili.com/xlive/web-room/v2/index/getRoomPlayInfo",
    qs:{
        'room_id': room_id,
        'protocol': '0,1',
        'format': '0,1,2',
        'codec': '0,1',
        'qn': current_qn,
        'platform': 'h5',
        'ptype': 8,
    },
    method: "GET",
    headers: {
        "content-type": "application/json"
    },
    }, function(error, response, body) {
    if (!error && response.statusCode == 200) {
        // console.log(JSON.parse(body).data.playurl_info.playurl)
        JSON.parse(body).data.playurl_info.playurl.stream.forEach(ele => {
            if(ele.protocol_name == "http_hls"){
                let romm_u = ele.format[0].codec[0].url_info[0].host+ele.format[0].codec[0].base_url+ele.format[0].codec[0].url_info[0].extra
                if (nn) {
                    videoArrayS.value.push({room_id:room_id,room_url:romm_u,val:true,msg:room_i})
                }
            }
        });

        }
    })

}

</script>
<style scoped>
.Green{
    background-color: rgb(0, 177, 0) !important;
}
.inBox{
    display: flex;
    margin-top: 10px;
}
.roomidtip{
    color: #fff;
    text-align: center;
    margin-top: 10px;
}
.lastT:hover{
    background-color:#ffffff60;
    border-radius: 2px;
}
.lastT{
    color:#fff;
    padding:2px 10px;

}
.closeBox{
    position: absolute;
    right: 0px;
    top: 0px;
}
.addRoom{
    display:flex;
    position: fixed;
    z-index: 50;
    padding: 10px 20px;
    background-color: #454e5d;
    left: 35%;
    top: 45%;
    border-radius: 4px;
    flex-direction: column;
    justify-content: center;
}
.Input{
    border: none;
    background-color: #3a404a;
    color: #fff;
    font-family: myFont;
    font-size: 16px;
    padding: 5px 10px;
    outline: none;
    margin-right:10px;
}
.msgb{
    padding: 1px 3px;
    background-color: rgba(255, 255, 255, 0.507);
    border-radius: 2px;
}
.fg{
    padding: 0 2px;
    color: #FFB027;
    border-color: #FFB027;
}
.dmb{
    position: relative;
    top: 0;
    left: 0;
    z-index: 30;
    display:flex;
    justify-content: flex-end;
    height: 220px;
    max-height: 220px;
    max-width: 250px;
    overflow-y: auto;
    flex-direction: column;
}
.dmBoxOne{
    display: inline-flex;
    flex-direction: row;
    overflow: hidden;border-radius: 2px;
    flex-shrink:0;
    max-height: 23px;
}
.dmBox{
    display: inline-flex;
    flex-direction: row;
    margin-top:5px;
    /* max-height: 23px; */
}
.dmmsk{
    position: absolute;
    left: 0;
    /* bottom: 0; */
    /* right: 0; */
    top: 0;
    z-index: 15;
    color: #fff;
}



.VConOp{
    opacity: 0 !important;
}
.svg>svg:hover{
    background-color:#ffffff60;
    border-radius: 4px;
}
.svg>svg{
    padding: 4px 8px;
    /* margin-right: 10px; */
    width: 20px;
    height: 20px;
}
.svg,.svge{
    display: flex;
    flex-direction: row;
}
.sa{
    width:100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-wrap: wrap;
}
.VCon{
    display: flex;
    position: absolute;
    justify-content: space-between;
    align-content: center;
    flex-wrap: wrap;
    bottom: 0px;
    width: 100%;
    z-index: 20;
    height: 35px;
    left:0;
    right:0;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
    opacity: 1;
}
.actM{
    display:block !important;
}
.actBoxOne{
    display:none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
}
.svg{
    position: relative;
    left: 6px;
}
.actLeft{
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.actRight{
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}
.actF:hover{
    background-color: #ffffff80;
    color:hotpink;
}
.actF{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 10px;
    align-content: center;
    max-height: 50px;
    margin-top: 5px;
    cursor: pointer;
}
.actBox{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    backdrop-filter: blur(5px);
}
.userI{
    position: absolute;
    right: 10px;
    top: 20px;
}
.fname{
    position: absolute;
    left: 10px;
    top: 55px;
    color: rgb(255, 60, 190);
}
.c-red{
    background-color: red;
}
.c-perpol{
    background-color: rgb(148, 92, 194);
}
.c-blue{
    background-color: var(--def-button-color-blue);
}
.c-pink{
    background-color: hotpink;
}
.butBox{
    display: flex;
    padding: 5px;
    margin-left: 8px;
}
.butO{
    border-radius: 2px;
    border: none;
    padding: 5px 10px;
    font-family: myFont;
    margin-right: 10px;
    color: #fff;
    cursor: pointer;
}
.butOs{
    border-radius: 2px;
    border: none;
    padding: 5px 10px;
    font-family: myFont;
    margin: 5px auto;
    color: #fff;
    cursor: pointer;
}
.video{
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
}
.fl{
    position: absolute;
    z-index: 10;
    top: 5px;
    left: 5px;
    background-color: hotpink;
    padding: 1px 5px;
}
.fls{
    position: absolute;
    z-index: 10;
    top: 5px;
    left: 5px;
    background-color: deepskyblue;
    padding: 1px 5px;
}
.flsc{
    position: absolute;
    z-index: 10;
    top: 5px;
    left: 5px;
    background-color: red;
    padding: 1px 5px;
}
.active{
    border-radius: 4px;
    border:2px solid deepskyblue !important;
}
.active2{
    border-radius: 4px;
    border:2px solid rgb(243, 193, 101) !important;
}
.active3{
    border-radius: 4px;
    border:2px solid rgb(241, 54, 54) !important;
}
.DDone{
    padding: 5px 5px 0 5px;
    position: relative;
    color: #fff;
}
.Imgs{
    width: 125px;
    height: 70px;
    border-radius: 4px;
    border:2px solid transparent;
}
.Img{
    width:100%;
    /* height: 100%; */
    border-radius: 4px;
    border:2px solid transparent;
}
.videoMain{
    width:100%;
    height:100%;
    flex: 1;
    flex-shrink: 0;
    background-color: rgb(0, 0, 0);
    display: flex;
    position: relative;
}
.LiveList{
    display: flex;
    min-height: 100px;
    height: 100px;
    max-height: 100px;
    /* max-height: 150px; */
    /* height: 30%; */
    width: 100%;
    /* align-content: center; */
    flex-wrap: wrap;
    /* flex-direction: row; */
    overflow: auto;
    justify-content: center;
}
.LiveMain{
    width: 550px;
    flex: 1;
    background-color: aqua;
    flex-direction: row;
    display: flex;
    margin: 0 auto;
    border-radius: 2px;
    overflow: hidden;
    min-height: 290px;
}
.tit{
    display: flex;
    justify-content: center;
}
.DDList{
    display: flex;
    max-width: 250px;
    min-width: 150px;
    width: 20%;
    height: 410px;
    color: #fff;
    flex-direction: column;
    overflow: auto;
}
.DDMain{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.DD{
    padding: 5px;
    /* background-color: aliceblue; */
    height: 410px;
    max-height: 410px;
    display: flex;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.DDList::-webkit-scrollbar,.LiveList::-webkit-scrollbar  {
    width: 0px;
    height: 6px
}
/*定义滚动条轨道*/
.DDList::-webkit-scrollbar-track,.LiveList::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}
/*定义滑块 内阴影+圆角*/
.DDList::-webkit-scrollbar-thumb,.LiveList::-webkit-scrollbar-thumb {
    background-color: #30B07F00;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0) 100%,transparent 100%,transparent 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 75%,transparent 75%,transparent);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.dmb::-webkit-scrollbar,.LiveList::-webkit-scrollbar  {
    width: 0px;
    height: 6px
}
/*定义滚动条轨道*/
.dmb::-webkit-scrollbar-track,.LiveList::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}
/*定义滑块 内阴影+圆角*/
.dmb::-webkit-scrollbar-thumb,.LiveList::-webkit-scrollbar-thumb {
    background-color: #30B07F00;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0) 100%,transparent 100%,transparent 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 75%,transparent 75%,transparent);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}
@media (max-width: 850px) {
  /* .DMMain {
    display: none;
  } */
  /* .videoMain{
    height:310px;
    min-height: 310px;
  } */
  /* .LiveList{
    height: 100% !important;
  } */
}
</style>